﻿<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include :: head('用户列表')"></head>
<link rel="stylesheet" th:href="@{/layui/extend/dtree/dtree.css}">
<body>
<div style="padding: 20px; background-color: #F2F2F2;height:100%;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-header">部门树</div>
                <div class="layui-card-body" id="toolbarDiv">
                    <ul id="deptTree" class="dtree" data-id="0"></ul>
                </div>
            </div>
        </div>
        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-header" id="card-header">用户列表</div>
                <div class="layui-card-body">
                    <form class="layui-form yadmin-search-area input">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label for="keywords" class="layui-form-label">关键字</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="keywords" autocomplete="off" placeholder="输入名称、邮箱" id="keywords" class="layui-input" />
                                </div>
                                <button lay-submit="" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary table-action">
                                    <i class="layui-icon layui-icon-search"></i>
                                </button>
                                <button type="reset" lay-filter="search" class="layui-btn layui-btn-sm layui-btn-primary table-action">
                                    <i class="layui-icon layui-icon-refresh"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                    <script type="text/html" id="toolbar">
                        <button type="button" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="add">
                            <i class="layui-icon layui-icon-addition">新增</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
                            <i class="layui-icon layui-icon-delete" title="删除">删除</i>
                        </button>
                    </script>
                    <table class="layui-hide" id="table-list"></table>
                    <script type="text/html" id="statusTpl">
                        <input type="checkbox" value="{{d.userId}}" lay-skin="switch" lay-text="正常|冻结" lay-filter="status" {{ d.status=="ENABLE"?"checked":"" }}>
                    </script>
                    <script type="text/html" id="column-toolbar">
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="info">
                            <i class="layui-icon layui-icon-edit" title="查看用户">查看</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">
                            <i class="layui-icon layui-icon-edit" title="编辑用户">编辑</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setRole">
                            <i class="layui-icon layui-icon-password" title="设置角色">角色</i>
                        </button>
                        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="reset">
                            <i class="layui-icon layui-icon-password" title="密码重置">密码重置</i>
                        </button>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
layui.extend({
    dtree: 'layui/extend/dtree/dtree',
    tablePlug: 'layui/extend/tablePlug',
}).use(['table', 'dtree', 'form', 'tablePlug'], function () {
    let table = layui.table, $ = layui.$, form = layui.form, tablePlug = layui.tablePlug, dtree = layui.dtree;
    var DTree = dtree.render({
        elem: "#deptTree",
        url: "/dept/tree",
        width: "60%",
        method: "post",
        dataStyle: "layuiStyle",
        toolbar: false,  // 右键工具栏
        menubar: true,  // 树上方工具栏, 展开、收缩、刷新、搜索等
        dataFormat: "list",
        ficon: ["1", "-1"],
        response: {
            statusCode: 0,
            message: "msg",
            level: "level",
            title: "name"
        }
    });
    
    dtree.on("node('deptTree')", function (obj) {
        table.reload('table-list', {
            where: {
                deptId: obj.param.nodeId
            }
        });
    });
    tablePlug.smartReload.enable(true);
    table.render({
        elem: '#table-list',
        url: '/mgr/list',
        method: 'post',
        where: {
            deptId: 0
        },
        dataType: 'JSON',
        page: true,
        toolbar: '#toolbar',
        smartReloadModel: true,
        cols: [
            [
                {type: 'checkbox'},
                {field: 'userId', title: 'ID', width: 40},
                {field: 'name', title: '用户名', minWidth: 20},
                {field: 'account', title: '登陆名', minWidth: 20},
                {field: 'email', title: '邮箱', minWidth: 20},
                {field: 'status', title: '状态', align: 'center', templet: "#statusTpl", width: 100},
                {fixed: 'right', title: '操作', align: 'center', toolbar: '#column-toolbar', width: 320}
            ]
        ], parseData: function (res) { //res 即为原始返回的数据
            return {
                "code": res.code, //解析接口状态
                "msg": res.msg, //解析提示文本
                "data": res.data, //解析数据列表
                "count": res.recordsTotal
            };
        }
    });
    // 工具条点击事件
    table.on('toolbar', function (obj) {
        if (obj.event === 'add') {
            editView("/mgr/add", '添加用户');
        } else if (obj.event === 'del') {
            layer.confirm('真的删除行么?', function (index) {
                let selectData = table.checkStatus('table-list').data;
                if (selectData.length > 0) {
                    let idsArray = [];
                    for (let i = 0; i < selectData.length; i++) {
                        idsArray.push(selectData[i].userId);
                    }
                    let ids = idsArray.toString();
                    delReq(ids, '/mgr/del')
                    layer.close(index);
                }
            });
        }
    });
    
    // 行点击事件 重置密码
    table.on('tool', function (obj) {
        let data = obj.data, event = obj.event;
        if (event === 'edit') {
            editView("/mgr/update?id=" + data.userId, '编辑用户');
        } else if (event === 'reset') {// 重置密码
            setUser(data.userId, '/mgr/reset')
        } else if (event === 'info') {
            editView("/mgr/detail?i=1&id=" + data.userId, '查看用户');
        } else if (event === 'setRole') {
            editView("/mgr/setRole?id=" + data.userId, '用户角色');
        }
    });
    
    // 账号状态(正常/锁定)点击事件
    form.on('switch(status)', function (obj) {
        setUser(obj.value, '/mgr/setState')
    });
    
    function setUser(ids, url) {
        $.ajax({
            type: 'post',
            url: url,
            dataType: 'json',
            data: {userId: ids},
            success: function (data) {
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 6});
                } else {
                    layer.msg(data.msg, {icon: 5});
                }
            },
            error: function (event) {
                if (event.status == 401) {
                    layer.msg("登录超时", {icon: 5, time: 1000});
                    window.location.reload(true);//刷新当前页
                }
            }
        });
    }
    
    form.on('submit(search)', function (form) {
        table.reload('table-list', {
            where: form.field
        });
        return false;
    });
});
</script>
</body>
</html>